<!-- 首页工作台饼图部分 -->
<template>
  <div class="pie-chart">
    <div ref="chartRef" class="pie-chart-item"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";

// 接收父组件传递的数据
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

// 使用 ref 获取 DOM 元素
const chartRef = ref(null);
let myChart = null;

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  if (!myChart) {
    myChart = echarts.init(chartRef.value);
  }

  const option = {
    //作用是当鼠标悬停在饼图上时 显示对应的数据
    tooltip: {
      trigger: "item",
    },
    //调整饼图分类标题位置 垂直显示 靠右对齐
    legend: {
      top: "5%",
      right: "2%",
      orient: "vertical",
      textStyle: {
        fontSize: 12,
      },
    },
    //作用是绘制饼图
    series: [
      {
        name: "数据统计",
        type: "pie",
        //调整饼图大小 第一个参数是内圆半径 第二个参数是外圆半径
        radius: ["45%", "65%"],
        //调整饼图位置 第一个参数是横坐标 第二个参数是纵坐标
        center: ["34%", "50%"],
        //作用是当饼图标签重叠时 不进行重叠
        avoidLabelOverlap: false,
        //作用是设置饼图的样式
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        //作用是设置饼图的标签
        label: {
          show: false,
          position: "center",
        },
        //作用是当鼠标悬停在饼图上时 显示对应的数据
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        //作用是设置饼图的标签线
        labelLine: {
          show: false,
        },
        data: props.data,
      },
    ],
  };

  option && myChart.setOption(option);
};

// 组件挂载时初始化图表
onMounted(() => {
  initChart();
});

// 监听数据变化，自动更新图表
watch(
  () => props.data,
  () => {
    initChart();
  },
  { deep: true }
);
</script>

<style scoped lang="scss">
.pie-chart {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;

  .pie-chart-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 90%;
  }
}
</style>
